<template>
  <div class="login">

    <div class="login-con">
      <p class="title">{{title}}</p>
      <el-form
        ref="ruleFormRef"
        :model="fromState"
        :rules="rules"
        class="demo-ruleForm"
        size="default"
      >
        <el-form-item  prop="account">
          <el-input
            v-model="fromState.account"
            placeholder="账号"
            prefix-icon="Avatar"
            @keypress.enter="submitForm(ruleFormRef)"
          />
        </el-form-item>
        <el-form-item  prop="password">
          <el-input
            type="password"
            :show-password="true"
            v-model="fromState.password"
            placeholder="密码"
            prefix-icon="Lock"
            @keypress.enter="submitForm(ruleFormRef)"
          />
        </el-form-item>
        <el-form-item  prop="authCode">
          <el-input
            style="width:50%;"
            v-model="fromState.authCode"
            placeholder="验证码"
            @keypress.enter="submitForm(ruleFormRef)"
          />
          <div class="authCode"><canvas width="100" height="30" id="verifyCanvas" @click="getCode"></canvas></div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width:100%"  @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>

      </el-form>
    </div>

  </div>

 
</template>

<script>
import { onBeforeMount, onMounted, reactive, ref, toRefs, unref } from "vue"
import { useRouter } from 'vue-router'
import {drawCode} from "tool/tools.js"
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const router = useRouter();
    let correctYzm='';
    const ruleFormRef = ref(null);
    const fromState=reactive({
      account:'', 
      password:'',
      authCode:'',//验证码
    })
    const rules = {
      account: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { min: 6, max: 12, message: '账号长度必须为6-12位', trigger: 'change' },
      ],
      password: [
        {
          required: true,
          message: '密码不能为空',
          trigger: 'blur',
        },
      ],
      authCode: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
        { min: 4, max: 4, message: '验证码长度必须为4位', trigger: 'blur' },
      ],
    }
    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          if(fromState.authCode.toUpperCase() != correctYzm.toUpperCase()){
            ElMessage.error('验证码错误');
            getCode();// 验证码
            fromState.authCode='';
            return
          }
          router.push({path:"/home"})
        }else{
          getCode();// 验证码
        }
      })
    }


    onMounted(()=>{
      getCode();// 验证码
    })

    // 获取验证码
    let getCode=()=>{
      drawCode("verifyCanvas").then(res=>{correctYzm=res.code})
    }

    return {
      ruleFormRef,
      fromState,
      rules,
      submitForm,
      title:import.meta.env.VITE_APP_TITLE,
      getCode
    }
  },

}
</script>

<style lang="less" scoped>
.login{
  height: 100vh;
  width: 100vw;
  filter: blur(0px);//阴影
  transform: scale(1); 
  background-image: url('@/assets/images/loginBG.png');
  display: flex;
  align-items: center;
  justify-content: center;
  .login-con{
    width: 300px;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding:0 25px;
    animation: move .4s ease-in-out 0s 1 both;
    .title{
      line-height: 50px;
      font-size: 20px;
      text-align: center;
      user-select: none;
    }
    .authCode{
      background-color: pink ;
      width: 100px;
      height: 30px;
      margin-left: auto;
    }
  }
}

@keyframes move{
  0% {
    -webkit-transform:  translateY( -50vh);
    transform: translateY( -50vh);
  }
  90%{
    -webkit-transform:  translateY( 20px);
    transform: translateY( 20px);
  }
  100% {
    -webkit-transform:  translateY( 0px);
    transform: translateY( 0px);
  }
}
</style>